<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>{$plugin.title} - {$app.title}</title>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="{$plugin.title},{$app.keywords}">
    <meta name="description" content="{$plugin.desc}">
    <meta name="author" content="Pluto"/>
    <style>
        a:link {
            color: #fff;
            text-decoration: none;
        }

        a:visited {
            color: #fff;
        }

        #export {
            display: none;
            margin: 0 auto;
            width: 250px;
            height: 250px;
            margin-top: 50px;
            margin-bottom: 50px
        }

        .operation-btns .o-btn1 {
            background-size: 11.6rem 4.325rem
        }

        .operation-btns .o-btn2 {
            background-size: 11.6rem 3.75rem
        }

        center {
            color: #fff;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{:plugin_static($plugin.alias)}/css/jqery.css">
</head>
<body>
<div class="wrapper">
    <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
    <div class="operation-header">
        <div class="h-title">

        </div>
    </div>
    <div class="operation-box">
        <a class="prev" onclick="changeHat()"></a>
        <div class="operation-img">
            <div class="cropper-content" id="content">
                <canvas class="" id="cvs"></canvas>
            </div>
        </div>
        <a class="next" onclick="changeHat()"></a>
    </div>
    <img id="export" alt="国庆专属头像" src="">
    <div class="operation-btns">
        <a class="o-btn1">
            <input class="o-btn1" id="upload" type="file" onchange="viewer()" style="opacity: 0;">
        </a>
        <a class="o-btn2" onclick="exportFunc()" style="display: none;">
        </a>
    </div>

    <div class="operation-done">
        <img src="/{$plugin.alias}/logo.png" alt="" class="act-done-happy">
    </div>
</div>
<div style="display: none">
    <img id="img" src="" alt="">
    {for start="0" end="25"}
    <img class="hide" id="hat{$i}" src="{:plugin_static($plugin.alias)}/img/hat{$i+1}.png">
    {/for}
</div>
<script src="{:plugin_static($plugin.alias)}/js/fabric.min.js"></script>
<script>
    const cvs = document.getElementById("cvs");
    const ctx = cvs.getContext("2d");
    const exportImage = document.getElementById("export");
    const img = document.getElementById("img");
    let hat = "hat1";
    let canvasFabric;
    let hatInstance;
    //var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
    const scrollHeight = document.getElementById("content").scrollHeight;

    function viewer() {
        const file = document.getElementById("upload").files[0];
        const reader = new FileReader;
        if (file) {
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                img.src = reader.result;
                img.onload = function () {
                    img2Cvs(img)
                }
            }
        } else {
            img.src = ""
        }
    }

    function img2Cvs(img) {
        cvs.width = img.width;
        cvs.height = img.height;
        cvs.style.display = "block";
        canvasFabric = new fabric.Canvas("cvs", {
            width: scrollHeight,
            height: scrollHeight,
            backgroundImage: new fabric.Image(img, {
                scaleX: scrollHeight / img.width,
                scaleY: scrollHeight / img.height
            })
        });
        changeHat();

        document.getElementsByClassName("o-btn1")[0].style.display = "none";
        document.getElementsByClassName("o-btn2")[0].style.display = "block";
        //document.getElementById("tip").style.opacity = 1
    }

    function changeHat() {
        document.getElementById(hat).style.display = "none";
        const hats = document.getElementsByClassName("hide");
        hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length ;
        const hatImage = document.getElementById(hat);
        hatImage.style.display = "block";
        if (hatInstance) {
            canvasFabric.remove(hatInstance)
        }
        hatInstance = new fabric.Image(hatImage, {
            top: 0,
            left: 0,
            scaleX: scrollHeight / hatImage.width,
            scaleY: scrollHeight / hatImage.height,
            cornerColor: "#0b3a42",
            cornerStrokeColor: "#fff",
            cornerStyle: "circle",
            transparentCorners: false,
            rotatingPointOffset: 30
        });
        hatInstance.setControlVisible("bl", false);
        hatInstance.setControlVisible("tr", false);
        hatInstance.setControlVisible("tl", false);
        hatInstance.setControlVisible("mr", false);
        hatInstance.setControlVisible("mt", false);
        canvasFabric.add(hatInstance)
    }

    function exportFunc() {
        document.getElementsByClassName("operation-box")[0].style.display = "none";
        document.getElementsByClassName("operation-btns")[0].style.display = "none";

        /*document.getElementById("exportBtn").style.display = "none";
        document.getElementById("tip").innerHTML = "长按图片保存或分享";
        document.getElementById("change").style.display = "none";*/
        cvs.style.display = "none";
        exportImage.style.display = "block";
        exportImage.src = canvasFabric.toDataURL({
            width: scrollHeight,
            height: scrollHeight
        });
        alert('长按图片保存或分享');
    }


</script>
</body>
</html>